<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>美观的alert插件</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="TGTool.css">
    <script src="TGTool.js"></script>
    <style>
        body {
        	margin: 0;
        	height: 100%;
        	background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
        	background-repeat: no-repeat;
          background-size: cover;
          background-attachment: fixed;
        }
		.button_container {
        	position: absolute;
          left: 0;
          right: 0;
          top: 30%;
        }
        		.btn {
          border: none;
          display: block;
          text-align: center;
          cursor: pointer;
          text-transform: uppercase;
          outline: none;
          overflow: hidden;
          position: relative;
          color: #fff;
          font-weight: 700;
          font-size: 15px;
          background-color: #222;
          padding: 17px 60px;
          margin: 0 auto;
          box-shadow: 0 5px 15px rgba(0,0,0,0.20);
        			margin-bottom: 20px;
        }
        
        .btn span {
          position: relative; 
          z-index: 1;
        }
        
        .btn:after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 490%;
          width: 140%;
          background: #78c7d2;
          -webkit-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
          -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
          transform: translateX(-98%) translateY(-25%) rotate(45deg);
        }
        
        .btn:hover:after {
          -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
          transform: translateX(-9%) translateY(-25%) rotate(45deg);
        }
    </style>
</head>

<body>
    <div class="button_container">
        <button class="btn btn1"><span>Hover me!</span></button>
        <button class="btn btn2"><span>Hover me! 成功</span></button>
        <button class="btn btn3"><span>Hover me! 警告</span></button>
        <button class="btn btn4"><span>Hover me! 失败</span></button>
    </div>




    <script>
        $(".btn1").on("click", function() {
            var tg = TGTool();
            tg.info("提示");
        })

        $(".btn2").on("click", function() {
            var tg = TGTool();
            tg.success("成功");
        })

        $(".btn3").on("click", function() {
            var tg = TGTool();
            tg.warning("警告");
        })

        $(".btn4").on("click", function() {
            var tg = TGTool();
            tg.error("失败");
        })
    </script>
</body>

</html>